<template lang="pug">
.list
  .header
    .header-search
      el-input(placeholder="供应商名称/品牌/业务覆盖范围" prefix-icon="el-icon-search" clearable v-model="searchString" @change="changeSearch")
    .header-handles
      el-button(size="small" @click="batchDelete") 批量删除
  .list-table
    el-table(
      height="100%"
      :data="list"
      :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
      border
      style="width: 100%"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      empty-text="未找到符合条件的内容"
    )
      el-table-column(type="selection" width="55" align="center")
      el-table-column(prop="companyName" label="供应商名称" min-width="150" align="center")  
        template(slot-scope="scope")
          .special(@click="seeDetail(scope.row)") {{ scope.row.companyName }} 
      el-table-column( label="注册资本" prop="registeredFund")
        template(slot-scope="scope") {{scope.row.registeredFund}}万元人民币
      el-table-column( label="企业负责人" prop="personsInChargeOfCompany")
      el-table-column( label="拒绝原因" prop="rejectReason")
      el-table-column(prop="createTime" sortable label="申请时间" width="150" align="center")
        template(slot-scope="{ row }") 
          .create-time {{ new Date(row.createTime).format('yyyy-MM-dd') }}
      el-table-column( label="操作")
        template(slot-scope="scope")
          .table-item-bd
            .table-item-handle
              .table-item-btn.info(@click="delItem(scope.row)") 删除
  .index-pagination <!--分页区域-->
    .pagination-total 共 {{ total }} 条
    .pagination-sizes 20 条/页
    el-pagination(
      background
      layout="prev, pager, next, jumper"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
    )          
  </template>
  
  <script>
  import { getSupplierStorageList, reviewSupplierStorage, deleteSupplierStorage } from 'api'
  import setTableHeader from '@/components/modal/setTableHeader'
  export default {
    name: 'supplierStorageList',
    data () {
      return {
        total:0,
        currentPage: 1,
        pageSize:20,
        isShow: true,
        isdelShow: false,
        page: 1,
        searchString: '',
        status: '',
        list: [],
        loading: false,
        showDialog: false,
        currentList: [],
        styleList: [],
        selectionList: []
      }
    },
    components: {
      setTableHeader
    },
    methods: {
      handleSelectionChange (rows) {
        this.selectionList = rows
      },
      async getList () {
        try {
          this.loading = true
          let query = { ...this.$route.query }
          query.currentPage = this.page
          query.pageLines = this.pageSize
          query.reviewStatus = 3
          if (this.searchString) query.searchString = this.searchString
          const { ResultSet } = await this.$axios.post(getSupplierStorageList, { ...query })
          this.total = ResultSet.recordNumber
          this.list = ResultSet.userData.loadBrandList
          this.loading = false
        } catch (err) {
          this.loading = false
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      },
      batchAgree () {
        if (!this.selectionList.length) {
          this.$message.error('请先选择要批量操作的供应商！')
          return
        }
        this.$confirm('确定要批量通过选择的供应商吗？', '提示').then(async () => {
          try {
            let storageIds = this.selectionList.map(item => item.storageId)
            await this.$axios.post(reviewSupplierStorage, { storageIds, reviewStatus: 2 })
            this.$message.success('审核成功！')
            this.getList()
          } catch (err) {
            console.log(err)
            this.$message.error(err.message || err.ResultSet.errors)
          }
        })
      },
      batchRefused () {
        if (!this.selectionList.length) {
          this.$message.error('请先选择要批量操作的供应商！')
          return
        }
        this.$confirm('确定要批量拒绝选择的供应商吗？', '提示').then(async () => {
          try {
            let storageIds = this.selectionList.map(item => item.storageId)
            await this.$axios.post(reviewSupplierStorage, { storageIds, reviewStatus: 3 })
            this.$message.success('审核成功！')
            this.getList()
          } catch (err) {
            console.log(err)
            this.$message.error(err.message || err.ResultSet.errors)
          }
        })
      },
      agree (row) {
        this.$confirm('确定要审核通过该供应商吗？', '提示').then(async () => {
          try {
            await this.$axios.post(reviewSupplierStorage, { storageIds: [row.storageId], reviewStatus: 2 })
            this.$message.success('审核成功')
            this.getList()
          } catch (err) {
            console.log(err)
            this.$message.error(err.message || err.ResultSet.errors)
          }
        })
        // this.getList()
      },
      refused (row) {
        this.$confirm('确定要拒绝该供应商吗？', '提示').then(async () => {
          try {
            await this.$axios.post(reviewSupplierStorage, { storageIds: [row.storageId], reviewStatus: 3 })
            this.$message.success('审核成功')
            this.getList()
          } catch (err) {
            console.log(err)
            this.$message.error(err.message || err.ResultSet.errors)
          }
        })
        // this.getList()
      },
      changeSearch () {
        this.page = 1
        this.getList()
      },
      changeStatus () {
        this.page = 1
        this.getList()
      },
      seeDetail (row) {
        console.log(row)
        this.$router.push({ name: 'supplierStorageDetail', params: { id: row.storageId, reviewStatus: row.reviewStatus } })
      },
      batchDelete () {
        if (!this.selectionList.length) {
          this.$message.error('请先选择要批量操作的供应商！')
          return
        }
        this.$confirm('是否确定删除该订单？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(async () => {
          try {
            let storageIds = this.selectionList.map(item => item.storageId)
            await this.$axios.post(deleteSupplierStorage, { storageIds })
            this.$message.success('删除成功！')
            this.getList()
          } catch (err) {
            console.log(err)
            this.$message.error(err.message || err.ResultSet.errors)
          }
        })
      },
      delItem (row) {
        this.$confirm('是否确定删除该订单？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(async () => {
          try {
            await this.$axios.post(deleteSupplierStorage, { storageIds: [row.storageId] })
            this.$message.success('删除成功！')
            this.getList()
          } catch (err) {
            console.log(err)
            this.$message.error(err.message || err.ResultSet.errors)
          }
        })
      },
      goAuditList () {
        this.$router.push({ name: 'orderAuditList' })
      },
      currentChange (page) {
        this.page = page
        this.getList()
      },
      settingHeader () {
        this.showDialog = true
      },
      closeDialog () {
        this.showDialog = false
      },
      confirmDialog () {
        this.showDialog = false
        this.getTableMenu()
      },
       
      handleCurrentChange(val) {
        this.currentPage= val
        this.getList()
      },
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.getList()
      })
    },
    beforeRouteUpdate (to, from, next) {
      next()
      this.getList()
    }
  } 
  </script>
  
  <style lang="scss">
  .el-badge-item {
    .el-badge__content {
      box-sizing: content-box;
    }
  }
  </style>
  
  <style lang="scss" scoped>
  .list {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #F3F3F4;
    box-sizing: border-box;
    box-shadow: 0px 4px 0px #F3F3F4;
    border-radius: 10px;
    padding: 0 40px;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    .el-input {
      width: 300px;
      margin-right: 16px;
    }
    .el-select {
      margin-right: 16px;
    }
    .header-search {
      display: flex;
      align-items: center;
      flex: 1;
    }
    .header-info {
      font-size: 14px;
      line-height: 22px;
      color: #8B8EAB;
    }
  }
  .list-table {
    height: calc(100% - 150px);
    .el-table {
      color: #3E4373;
    }
    .special {
      color: #FF2E42;
      cursor: pointer;
    }
  }
  .brand-tag {
    display: inline-block;
    padding: 1px 10px;
    background: rgba(134, 118, 255, 0.1);
    border-radius: 6px;
    font-size: 14px;
    line-height: 22px;
    color: #3E4373;
  }
  .table-pagination {
    padding: 24px 0;
    text-align: right;
  }
  .table-item-bd {
    &.flex {
      display: flex;
      align-items: center;
    }
    &.flex-warp {
      flex-wrap: wrap;
    }
    &.click {
      cursor: pointer;
    }
    .tag-item {
      padding: 1px 10px;
      background: rgba(134, 118, 255, 0.1);
      border-radius: 6px;
      font-size: 14px;
      line-height: 22px;
      color: #64698F;
      margin-right: 4px;
      margin-bottom: 4px;
    }
    .table-item-head {
      width: 24px;
      height: 24px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 4px;
      margin-right: 8px;
    }
    .table-item-name {
      font-size: 14px;
      line-height: 22px;
      color: #FF2E42;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .table-item-sales {
      display: flex;
      align-items: center;
    }
    .item-sales {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px 8px;
      border: 1px solid #F7DCB7;
      box-sizing: border-box;
      border-radius: 2px;
      &.success {
        border-color: #C0E5D1;
        background: #F2FAF6;
        color: #32C37D;
      }
      &.warning {
        border-color: #F7DCB7;
        background: #FFF7EC;
        color: #FC9700;
      }
      &.info {
        border-color: #B2B4C7;
        background: #F6F6F9;
        color: #8B8EAB;
      }
      span {
        display: inline-block;
        font-size: 14px;
        line-height: 22px;
      }
      .iconfont {
        margin-left: 6px;
        font-size: 16px;
        color: #CCD2E3;
      }
    }
  }
  .el-badge-item {
    margin-top: 10px;
    margin-right: 20px;
  }
  .table-item-status {
    display: flex;
    align-items: center;
    .status-point {
      position: relative;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 4px;
      &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        transform: translate(-50%, -50%);
      }
      &.success {
        background: rgba(48, 217, 135, .5);
        &:before {
          background: #30D987;
        }
      }
      &.warning {
        background: rgba(251, 177, 66, .5);
        &:before {
          background: #FBB142;
        }
      }
      &.normal {
        background: rgba(134, 118, 255, .5);
        &:before {
          background: #8676FF;
        }
      }
    }
    .iconfont {
      font-size: 16px;
      margin-right: 8px;
    }
    .icon-normal {
      color: #32C37D;
    }
    .icon-block-up {
      color: #FBB142;
    }
  }
  .table-item-handle {
    display: flex;
    .table-item-btn {
      margin-right: 8px;
      padding: 5px 8px;
      font-size: 12px;
      line-height: 20px;
      border-radius: 6px;
      cursor: pointer;
      &.warning {
        background: #FDEFF1;
        color: #FF2E42;
      }
      &.normal {
        background: #F3F0FF;
        color: #7362F0;
      }
      &.info {
        background: #F6F6F9;
        color: #3E4373;
      }
    }
  }
  .index-pagination {
    margin-top: 24px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
    color: #7A7A7A;
  }
  </style>
  